<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>传智健康后端</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<div class="limiter" id="app">
    <div class="container-login100" style="background-image: url('img/bg.jpg');">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form class="login100-form validate-form" method="post" action="/login.do">
                <span class="login100-form-title p-b-49">登录</span>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" v-model="username" name="username" placeholder="请输入用户名">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100">密码</span>
                    <input class="input100" type="password" v-model="password" name="password" placeholder="请输入密码">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>
                <div>
                    <div class="checkbox remember-password-container">
                        <input type="checkbox" v-model="remember" name="remember" id="remember-password-checkbox">
                        <label for="remember-password-checkbox" id="remember">
                            记住密码
                        </label><br/>
                        <span><font color="red">{{message}}</font></span>
                    </div>
                    <div class="text-right p-t-8 p-b-31">
                        <a href="/changePwd.html">忘记密码？</a>
                    </div>
                </div>
                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn" type="submit" onclick="save()">登 录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../js/vue.js"></script>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            remember: false,
            message: ''
        },
        method: {},
    });

    start();

    function start() {
        let url = document.location.toString();
        let strings = url.split('?');
        if (strings.length > 1) {
            vue.$data.message = '用户名或密码错误';
            clearCookie();
        } else {
            getCookie();
        }
    };

    function save() {

        if (vue.$data.remember) {
            setCookie('username', vue.$data.username);
            setCookie('password', vue.$data.password);
            setCookie('remember', vue.$data.remember);
        } else {
            clearCookie('password');
            clearCookie('remember');
        }
    };

    function getCookie() {//获得cookie
        let line = document.cookie;//所有cookie的字符
        let cookies = line.split(";"); //cookie的字符串集合
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].split("=");//cookie的集合,[0]为key,[1]为value
            let key = cookie[0].replace(/(^\s*)|(\s*$)/g, "");
            let value = cookie[1];
            if (key === 'username') {
                vue.$data.username = value;
            }
            if (key === 'password') {
                vue.$data.password = value;
            }
            if (key === 'remember') {
                vue.$data.remember = value;
            }
        }
        ;
    };

    function setCookie(name, value) {
        let exp = new Date();
        exp.setTime(exp.getTime() + 7 * 24 * 60 * 60 * 1000);//保存一周
        document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
    };

    function clearCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        document.cookie = name + "=" + null + ";expires=" + exp.toGMTString();
    }


</script>
</body>

</html>